﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sample</title>
    <style type="text/css">
        .reveal *
        {
            display: none;
        }
        /* Children of class="reveal" are not shown */
        .reveal *.handle
        {
            display: block;
        }
        /* Except for the class="handle" child */
    </style>
    <script type="text/javascript">
        // Don't do anything until the entire document has loaded
        window.onload = function () {
            // Find all container elements with class "reveal"
            var elements = document.getElementsByClassName("reveal");
            for (var i = 0; i < elements.length; i++) { // For each one...
                var elt = elements[i];
                // Find the "handle" element with the container
                var title = elt.getElementsByClassName("handle")[0];
                // When that element is clicked, reveal the rest of the content
                title.onclick = function () {
                    if (elt.className == "reveal") elt.className = "revealed";
                    else if (elt.className == "revealed") elt.className = "reveal";
                };
            }
        };
    </script>
</head>
<body>
    <div class="reveal">
        <h1 class="handle">
            Click Here to Reveal Hidden Text</h1>
        <p>
            This paragraph is hidden. It appears when you click on the title.</p>
        <p>
            it set the whole block display or not.</p>
        <p>
            very strange design idea.</p>
    </div>
</body>
</html>
